.square {
  background: transparent;
  border: 12px solid #0da192;
  float: left;
  font-size: 80px;
  font-weight: bold;
  height: 150px;
  line-height: 1px;
  margin-right: -12px;
  margin-top: -12px;
  padding: 0;
  text-align: center;
  width: 150px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: pointer;

  &.X {
    color: rgb(84, 84, 84);
  }

  &.O {
    color: rgb(242, 235, 211);
  }

  &:focus {
    outline: none;
  }
}

@media only screen and (max-width: 480px) {
  .square {
    width: 120px;
    height: 120px;
    border-width: 9px;
    margin-top: -9px;
    margin-right: -9px;
  }
}
